<template>
  <div class="home-page">
    <div class="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="total-frame">
            <div class="total-title">楼盘总数</div>
            <div class="total-value" :style="{
              color: '#409EFF'
            }">
              <CountTo :startVal="0" :endVal="homeData.total_loupan" :duration="1000" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <div class="total-title">可投放楼盘数量</div>
            <div class="total-value" :style="{
              color: '#67C23A'
            }">
              <CountTo :startVal="0" :endVal="homeData.Ad_loupan" :duration="1000" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <div class="total-title">不可投放楼盘数量</div>
            <div class="total-value" :style="{
              color: '#F56C6C'
            }">
              <CountTo :startVal="0" :endVal="homeData.noAd_loupan" :duration="1000" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="center">
      <div class="un-handle-layout">
        <div class="layout-title">
          <span>订单</span>
          <span @click="gotoOrder">前往</span>
        </div>
        <div class="un-handle-content">
          <div class="un-handle-item">
            <span class="font-medium">待支付订单</span>
            <span style="float: right" class="color-danger">({{ homeData.noPay_orders }})</span>
          </div>
          <div class="un-handle-item">
            <span class="font-medium">已支付订单</span>
            <span style="float: right" class="color-danger">({{ homeData.pay_orders }})</span>
          </div>
        </div>
      </div>
      <div class="un-handle-layout">
        <div class="layout-title">
          <span>素材</span>
          <span @click="gotoSucai">前往</span>
        </div>
        <div class="un-handle-content">
          <div class="un-handle-item">
            <span class="font-medium">待审核素材</span>
            <span style="float: right" class="color-danger">({{ homeData.noexam_source }})</span>
          </div>
          <div class="un-handle-item">
            <span class="font-medium">审核未通过素材</span>
            <span style="float: right" class="color-danger">({{ homeData.nopass_source }})</span>
          </div>
          <div class="un-handle-item">
            <span class="font-medium">审核通过素材</span>
            <span style="float: right" class="color-danger">({{ homeData.pass_source }})</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="pieChart" ref="piecChartRef"></div>
      </div>
      <div class="right">
        <div class="barChart" ref="barChartRef"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStatData } from "@/api/ahome";

import pieOption from "./pie.js";
import barOption from "./bar.js";
import CountTo from "vue-count-to";
export default {
  components: {
    CountTo
  },
  data() {
    return {
      homeData: {},
      // 图表实例
      pieChart: null,
      // 图表配置项
      pieChartOptions: pieOption,
      // 图表实例
      barChart: null,
      // 图表配置项
      barChartOptions: barOption
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    gotoOrder(){
      // console.log('去订单页面');
      this.$router.push({ path: "/oms/order" });
    },
    gotoSucai(){
    // console.log('去素材页面')
    
    this.$router.push({ path: "/sms/flash" });

    },
    getData() {
      getStatData().then(res => {
        if (res.isSuccee) {
          this.homeData = res.data;
          this.initChart();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    initChart() {
      this.pieChart = this.$echarts.init(this.$refs.piecChartRef);
      this.getPieChart();
      this.barChart = this.$echarts.init(this.$refs.barChartRef);
      this.getBarChart();
    },
    getPieChart() {
      let pieData = this.homeData.sucaiTypes.map((item, index) => ({
        name: item,
        value: this.homeData.sucaiTypeCounts[index]
      }));

      this.pieChartOptions.series[0].data = pieData;
      this.pieChart.setOption(this.pieChartOptions);
    },
    getBarChart() {
      this.barChartOptions.xAxis.data = this.homeData.firstFiveName;
      this.barChartOptions.series[0].data = this.homeData.firstFiveNameCounts;
      this.barChart.setOption(this.barChartOptions);
    }
  }
};
</script>

<style lang="scss" scoped>
.home-page {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
  .top {
    .total-frame {
      border: 1px solid #c4c6ca;
      border-radius: 4px;
      padding: 20px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .total-title {
        font-size: 16px;
        color: #5f5f5f;
      }
      .total-value {
        font-size: 30px;
        margin-top: 10px;
        font-weight: bold;
      }
    }
  }
  .center {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .un-handle-layout {
      border: 1px solid #dcdfe6;
      width: 49%;
      .layout-title {
        color: #606266;
        padding: 15px 20px;
        background: #f2f6fc;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        span:nth-of-type(1) {
        }
        span:nth-of-type(2) {
          cursor: pointer;
          color: #409eff;
        }
      }
      .un-handle-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ebeef5;
        padding: 10px;
      }
    }
  }
  .bottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left {
      border: 1px solid #dcdfe6;
      width: 49%;
      .pieChart {
        display: flex;
        justify-content: center;
        margin-top: 11px;
        width: 100%;
        height: 300px;
      }
    }
    .right {
      border: 1px solid #dcdfe6;
      width: 49%;
      .barChart {
        display: flex;
        justify-content: center;
        margin-top: 11px;
        width: 100%;
        height: 300px;
      }
    }
  }
}
</style>